<template>
    <div class="boxx">
    <div class="system-messages">
        <!-- 顶部表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="信息内容">
                <el-input v-model="formInline.msg_content" placeholder="请输入信息内容"></el-input>
            </el-form-item>
            <el-form-item label="消息状态">
                <el-select v-model="formInline.msg_state" placeholder="请输入">
                    <el-option label="未读" value="0"></el-option>
                    <el-option label="已读" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="消息类型" prop="line_type" class="label-center-align">
                <el-select v-model="formInline.msg_type" class="full-width-input" clearable style="width: 230px;">
                    <el-option v-for="(item, index) in line_typeOptions" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false">重置</el-button>
                <el-button class="custom-button" @click="fill()">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 删除刷新按钮 -->
        <div style="margin-bottom: 10px;">
            <el-button class="custom-button2" @click="DelSupplier()">删除</el-button>
            <el-button class="custom-button2" @click="drawer = true">刷新</el-button>
        </div>
        <!-- 数据表格与按钮 -->
        <el-table ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" :data="tableData"
            border style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="msg_id" label="序号" width="120">
            </el-table-column>
            <el-table-column prop="msg_content" label="消息内容" width="740">
            </el-table-column>
            <el-table-column prop="msg_type" label="消息类型" width="120">
            </el-table-column>
            <el-table-column prop="msg_state" label="消息状态" width="118">
                <template slot-scope="scope">
                    <el-tag type="primary" effect="dark" v-if="scope.row.msg_state == 1">已读
                    </el-tag>
                    <el-tag type="danger" effect="dark" v-if="scope.row.msg_state == 0">未读
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="rcv_time" label="接收时间" width="170">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="Check(scope.row)" type="text" size="small">审核</el-button>
                    <el-button @click="Delete(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[3, 6, 9, 12]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="rows">
            </el-pagination>
        </div>
    </div>
</div>
</template>

<script>
import $http from '@/http/base.js'
export default {
    data() {
        return {
            labelPosition: 'right',
            drawer: false,
            direction: 'rtl',
            upload_file: "",
            lists: [],
            formInline: {
                msg_content: "",
                msg_type: "",
                msg_state: '',
            },
            line_typeOptions: [{
                "label": "审核",
                "value": "审核"
            }, {
                "label": "入库",
                "value": "入库"
            }, {
                "label": "出库",
                "value": "出库"
            }, {
                "label": "库存",
                "value": "库存"
            }, {
                "label": "到期提醒",
                "value": "到期提醒"
            }],
            value1: '',
            value2: '',
            tableData: [],
            multipleSelection: [],
            currentPage: 1, //当前页
            pageSize: 2, //每页显示数
            rows: 1, //总行数
        }
    },
    methods: {
        fill() {
            var tj = "1=1";
            //模糊查询
            if (this.formInline.msg_content != "") {
                tj +=
                    " and  msg_content  like concat('%',concat('" + this.formInline.msg_content + "','%'))";
            }
            if (this.formInline.msg_state != "") {
                tj +=
                    " and msg_state like concat('%',concat('" + this.formInline.msg_state + "','%'))";
            }
            if (this.formInline.msg_type != "") {
                tj +=
                    " and msg_type like concat('%',concat('" + this.formInline.msg_type + "','%'))";
            }
            $http.get("api/SystemMessages?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage + "&str=" + tj)
                .then((res) => {
                    console.log("数据：" + res);
                    this.tableData = res.list;
                    this.rows = res.rows;

                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        Check(row) {
            console.log(row.deal_url);
            this.$router.push({ name: row.deal_url });
        },
        handleSizeChange(size) {
            console.log(`每页 ${val} 条`);
            this.pageSize = size;
            this.currentPage = 1;
            this.fill();
        },
        handleCurrentChange(cpage) {
            console.log(`当前页: ${val}`);
            this.currentPage = cpage;
            this.fill();
        },
        handleClick(row) {
            this.$router.push({ name: 'supplierInfo', params: { IID: row.supply_code } })
        },
    },
    mounted() {
        this.fill();
        this.currentPage = 1
    }
}
</script>

<style scoped>
.system-messages {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 40px;
}
</style>